<template>
  <div id="divBox">
    <div class="logo">
      <h3>收银界面</h3>
    </div>
    <div class="tableDiv">
      <div class="tables"><cashieTable></cashieTable></div>
      <div class="pageDiv"><cashiePage></cashiePage></div>
    </div>
    <div class="feature">
      <div class="feature1">
        <h4>应收账款: <span>0</span></h4>
      </div>
      <div class="feature2">
        <el-input placeholder="实收"></el-input>
      </div>
      <div class="feature3">
        <h4>找补: <span>0</span></h4>
      </div>
      <div class="feature4">
        <el-button>确认收款</el-button>
      </div>
    </div>
  </div>
</template>
<script>
//引入的组件
import cashieTable from "@/components/CashieTable.vue";
import cashiePage from "@/components/CashiePage.vue";
//引入的辅助函数
import { mapState } from "vuex";
export default {
  name: "cashierView",
  //注册的组件
  components: { cashieTable, cashiePage },
  ///计算属性
  computed: {},
  //存放数据
  data() {
    return {};
  },
  //存放方法
  methods: {},
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  width: 100%;
  height: 100%;
}
#divBox {
  width: 100%;
  height: 800px;
  margin: 0 auto;
  .logo {
    h3 {
      margin-left: 4%;
    }
  }
  .tableDiv {
    width: 92%;
    margin: 2% 0 0 4%;
  }
  .pageDiv {
    margin: 0 auto;
    margin-top: 5%;
    text-align: center;
  }
  .feature {
    width: 100%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .feature1 {
      margin-bottom: 1%;
      margin-right: 10%;
      h4 span {
        color: red;
      }
    }
    .feature2 {
      margin-bottom: 1%;
      margin-right: 10%;
    }
    .feature3 {
      margin-bottom: 1%;
      margin-right: 10%;
      h4 span {
        color: red;
      }
    }
    .feature4 {
      margin-bottom: 1%;
      margin-right: 10%;
      .el-button {
        border: 1px solid #ffad17;
        color: #ffad17;
        padding: 20px;
      }
    }
  }
}
</style>